<template>
    <div style="display: block;" >
        <el-backtop ><!--回到顶部-->
            <div style="background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12); color: #1989fa;">
                UP
            </div>
        </el-backtop>
    <el-row v-for="(good, index) in goods" >
        <el-col  :span="6" v-for="(product, index2) in good" :key="index2">
            <el-card  style="margin-left: 20px;width: 340px" shadow="hover" :body-style="{ padding: '30px' }">
<!--                <img @click="detail(product)" :src="`./img/productPictures/`+product.productPicture" class="image">-->
                <img @click="detail(product)" :src="`./img/productPictures/${product.productPicture}`" class="image">
                <div style="padding: 14px;">
                    <span>{{product.productName}}</span>
                    <div class="bottom clearfix">
                        <span style="font-size: 20px;color: red">￥{{product.productSalePrice}}</span>
                        <span v-show="product.productPrice != ''" style="font-size: 13px;color: #8c8c8c;margin-left: 10px"><del>￥{{product.productPrice}}</del></span>

                        <el-button @click="addShoppongCart(product)" type="danger" circle icon="el-icon-shopping-cart-2" class="button">+</el-button>
                    </div>
                    <div style="display: flex;margin-top: 10px">
                        <div style="display: flex;width: 240px;word-wrap: break-word;word-break:break-all; overflow: hidden; ">
                    <el-tag size="mini" type="info">限购五份</el-tag>
                    <el-tag size="mini" type="info">今日爆火</el-tag>
                        </div>
                        <div style="width: 230px;margin-left: 20px;">
                    <el-rate disabled
                             v-model="star"
                             :colors="colors">
                    </el-rate>
                        </div>
                    </div>
                    <div style="font-size: 14px;margin-left: 170px;margin-bottom: -30px;color: rgba(5,2,3,0.29)"><p>销量 10</p></div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    </div>

</template>

<script>
    export default {
        name: "goods",
        props:{
            goods:Array,
            productPictures:Array,
        },
        data(){
            return{
                doIt:false,
                currentDate: new Date(),
                star: 4,  //评分多少颗星
                colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }

        }
        },
        methods:{
            detail(product){
                console.log('product',product)
                let userId = this.$cookies.get("id")
                if (userId == null) {
                    this.$message({
                        type: 'info',
                        message: '请先登录'
                    });
                    this.$router.push({name:"Login",params:{region:'用户'}}) //跳转到登录页面
                    return false
                }
                this.$router.push({name: "GoodDetail", params: {product: product}})
            },
            addShoppongCart(product) {
                let userId = this.$cookies.get("id")
                if (userId == null) {
                    this.$message({
                        type: 'info',
                        message: '请先登录'
                    });
                    this.$router.push({name:"Login",params:{region:'用户'}}) //跳转到登录页面
                    return false
                }
                this.$axios({
                    url: '/api/shoppingCart/addShoppingCart',
                    method: 'post',
                    data: {
                        number: 1,
                        price: product.productSalePrice,
                        productId: product.productId,
                        userId: userId,
                    }
                }).then(res => {
                    console.log("更新成功", res)
                    if (res.data > 0) {          //只有data返回1时成功
                        this.$message({ //成功修改提示
                            showClose: true,  //设置手动关闭
                            center: true,//内容居中
                            message: '加入购物车成功',
                            type: 'success'
                        })
                    }
                })
            },

        },
        created() {
            console.log("goods page ProductPictures:",this.productPictures)
        },
        mounted() {
        },
        // watch:{
        //     data: function(newValue,oldValue){
        //         if (newValue != oldValue){
        //                 this.goods = newValue
        //         }
        //     }
        // }

    }
</script>

<style scoped>



    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        width: 40px;
        height: 40px;
        padding: 0;
        float: right;
    }

    .image {
        width:280px;
        height:186px;
        max-width:100%;
        max-height:100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    /deep/ .el-rate__icon{  /*设置评分icon的大小*/
        font-size: 15px;
    }
    /deep/ .el-rate__item{
        width: 20px;
    }
</style>
